<!-- 普通键盘，高度可控 -->
<template>
	<view class="editor-container" @click="handleClick">
		<view class="editor-box" :style="{ height: `${height}rpx` }">
			<view class="edit-area">
				<view class="edit-body">
					<editor :id="editorId" :placeholder="placeholder" showImgSize showImgToolbar showImgResize
						@statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady" @focus="bindFocus"
						@blur="bindBlur" @input="bindInput" :focus="focus"></editor>
				</view>
			</view>
			<view class="edit-bar" v-if="showBar">
				<view v-for="item in barListActive" :key="item.id" @click="handleBarClick(item)" :style="item.style">
					<template v-if="item.text">
						<span :style="{ color: item.activeColor }">
							{{ item.text }}
						</span>
					</template>
					<template v-else>
						<img :src="item.activeIcon" />
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			editorId: {
				type: String,
				default: '123',
			},
			// 富文本值
			value: {
				type: String,
				default: null,
			},
			height: {
				type: Number,
				default: 600,
			},
			showBar: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			const isIos = uni.getSystemInfoSync().platform.includes('ios')
			return {
				isIos,
				statusOn: false, //编辑器可用
				editorCtx: null, // 编辑器实例
				focus: false, // 编辑器光标聚焦
				readOnly: false, // 只读
				formats: {}, // 当前选中的格式化样式
				placeholder: '请输入...',
				barList: [
					// 操作栏
					{
						id: 0,
						name: '标题',
						icon: 'https://www.cdn.kxcdedu.top/image/default/6E3B335D518A470A83E4DD6E6BBA0D9F-6-2.png',
						iconAct: 'https://www.cdn.kxcdedu.top/image/default/96F05A3A1CB844088972FABAEAA99208-6-2.png',
						color: '#333333',
						colorAct: '#6B5AF7',
						format: {
							key: 'header',
							val: 3,
						},
					},
					{
						id: 123,
						name: '有序序号',
						icon: 'https://www.cdn.kxcdedu.top/image/default/4FE31194C52549AE9A1CDDBD3C186B55-6-2.png',
						iconAct: 'https://www.cdn.kxcdedu.top/image/default/D459EC7F8F404183A401AC1F7AD4A568-6-2.png',
						color: '#333333',
						colorAct: '#6B5AF7',
						format: {
							key: 'list',
							val: 'ordered',
						},
					},
					{
						id: 456,
						name: '无序序号',
						icon: 'https://www.cdn.kxcdedu.top/image/default/8733E0D41D414F3182CE3A644141052D-6-2.png',
						iconAct: 'https://www.cdn.kxcdedu.top/image/default/988AE0A34F6A4BA38B9F062151D0916D-6-2.png',
						color: '#333333',
						colorAct: '#6B5AF7',
						format: {
							key: 'list',
							val: 'bullet',
						},
					},
					{
						id: 1,
						name: '加粗',
						icon: 'https://www.cdn.kxcdedu.top/image/default/DAD513E55E4843309C62ED5B4580D375-6-2.png',
						iconAct: 'https://www.cdn.kxcdedu.top/image/default/E4B15B816ABF45ACB71AB5CF6D807E6C-6-2.png',
						format: {
							key: 'bold',
							// #ifdef APP-PLUS || H5
							val: true,
							// #endif
							// #ifdef MP
							val: 'strong',
							// #endif
						},
					},
					{
						id: 2,
						name: '图片',
						icon: 'https://www.cdn.kxcdedu.top/image/default/ADEC62D6DA3C41D683DC5E42F1D6A713-6-2.png',
					},
					// {
					//   id: 3,
					//   name: '撤销',
					//   icon: '/static/edit_icon/last_act.png',
					// },
					// {
					//   id: 4,
					//   name: '重做',
					//   icon: '/static/edit_icon/next_act.png',
					// },
					// {
					// 	id: 5,
					// 	name: '发送',
					// 	text: '发送',
					// 	style: {
					// 		color: 'white',
					// 		fontSize: '24rpx',
					// 		fontWeight: '500',
					// 		backgroundImage: 'linear-gradient( 76.3deg,  rgba(44,62,78,1) 12.6%, rgba(69,103,131,1) 82.8% )',
					// 		borderRadius: '20rpx',
					// 		padding: '6rpx 20rpx',
					// 	},
					// },
				],
			}
		},
		methods: {
			handleClick(e) {
				this.$emit('click', e)
			},
			//编辑器初始化完成时触发
			onEditorReady() {
				console.log(827, this.editorId, this.height)
				uni
					.createSelectorQuery()
					.in(this)
					.select(`#${this.editorId}`)
					.context((res) => {
						this.editorCtx = res.context
						let rtTxt = this.value
						this.setContents(rtTxt) //设置富文本内容
					})
					.exec()
			},
			//设置富文本内容
			setContents(richText) {
				this.editorCtx.setContents({
					html: richText,
					success: (res) => {},
				})
			},
			//编辑器聚焦时触发
			bindFocus(res) {
				this.focus = true
				this.retracted = false
				this.$emit('bindfocus', {
					detail: {
						value: res,
					},
				})
			},
			//编辑器失去焦点时触发
			bindBlur(res) {
				this.focus = false
				this.$emit('bindblur', {
					detail: {
						value: res,
					},
				})
			},
			// 操作栏点击
			handleBarClick(item) {
				this.focus = true
				const {
					format,
					id
				} = item
				if (id == 3) {
					this.editorCtx.undo()
					this.$emit('last')
					return
				}
				if (id == 4) {
					this.editorCtx.redo()
					this.$emit('next')
					return
				}
				if (id == 2) {
					this.insertImage()
					return
				}
				if (format) {
					const {
						key,
						val
					} = format
					this.editorCtx.format(key, val)
				}
			},
			// 点击底部输入栏
			handleBarInputClick() {
				this.retracted = false
			},
			//清空编辑器内容
			clearContent() {
				this.editorCtx.clear({
					success: (res) => {
						this.showM = false
						this.$emit('clearSuccess')
					},
				})
			},
			// 设置样式
			formatStyle(item) {
				const {
					key,
					val
				} = item
				this.editorCtx.format(key, val)
			},
			// 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
			onStatusChange(res) {
				const formats = res.detail
				this.formats = formats
			},
			//编辑器输入中时触发
			bindInput(res) {
				const {
					html,
					text
				} = res.detail
				this.$emit('input', html)
			},
			//撤销
			undo() {
				this.editorCtx.undo()
				this.$emit('undo')
			},
			//恢复
			redo() {
				this.editorCtx.redo()
				this.$emit('restore')
			},
			// 插入图片
			insertImage(img) {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function() {
								console.log('insert image success')
							},
						})
					},
				})
			},

		},
		computed: {
			barListActive() {
				return this.barList.map((item) => {
					if (item.format) {
						const {
							key,
							val
						} = item.format
						const isFormat = this.formats[key] == val
						if (item.text) {
							const activeColor = isFormat ? item.colorAct : item.color
							return {
								...item,
								activeColor,
							}
						} else {
							const activeIcon = isFormat ? item.iconAct : item.icon
							return {
								...item,
								activeIcon,
							}
						}
					}
					return {
						...item,
						activeIcon: item.icon,
					}
				})
			},
		},
		watch: {
			formats(val) {
				console.log('formats change!', val)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.editor-container {
		.editor-box {
			box-sizing: border-box;
			padding-bottom: 20rpx;
			min-height: 300rpx;
			background: white;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			transition: 0.6s;
		}

		.edit-area {
			height: calc(100% - 80rpx);
			flex: 1;
		}

		.edit-body {
			height: 100%;
			/* #ifdef MP-WEIXIN */
			editor {
				transition: 0.6s;
				padding: 20rpx 20rpx 10rpx;
				border-radius: 20rpx;
				height: 100%;
				min-height: 180rpx;
			}
			/* #endif */
		}

		.edit-bar {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding-top: 20rpx;

			>view {
				img {
					width: 50rpx;
					height: 50rpx;
				}

				span {
					font-size: 28rpx;
					width: 40rpx;
					line-height: 40rpx;
				}
			}
		}

		.ql-container {
			transition: 0.6s;
			padding: 20rpx 20rpx 10rpx;
			border-radius: 20rpx;
			height: 100%;
			min-height: 180rpx;
		}
	}
</style>
